<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>18.1.1-CSR、SSR 以及同构渲染</title>
</head>
<body>
    
</body>
    <script>
        /**
         * Vue.js 的两种渲染方式，
         *  即客户端渲染（client-side rendering，CSR），
         *  以及服务端渲染（server-side rendering，SSR）。
         * Vue.js 作为现代前端框架，
         *  不仅能够独立地进行 CSR 或 SSR，
         *  还能够将两者结合，形成所谓的同构渲染（isomorphic rendering）。
         * 
         * 服务端渲染的工作流程
         * - 用户通过浏览器请求站点。
         * - 服务器请求 API 获取数据。
         * - 接口返回数据给服务器。
         * - 服务器根据模板和获取的数据拼接出最终的 HTML 字符串。
         * - 服务器将 HTML 字符串发送给浏览器，浏览器解析 HTML 内容并渲染。
         * 当用户再次通过超链接进行页面跳转，会重复上述 5 个步骤。
         * 
         * CSR 是在浏览器中完成模板与数据的融合，并渲染出最终的 HTML 页面
         * 
         * CSR 的工作流程
         * - 客户端向服务器或 CDN 发送请求，获取静态的 HTML 页面
         * - 浏览器会加载 HTML 中引用的资源
         * - 服务器或CDN 会将相应的资源返回给浏览器
         * - 浏览器对 CSS 和 JavaScript 代码进行解释和执行
         *     当JavaScript 被解释和执行后，才会渲染出页面内容，即“白屏”结束
         * - 客户端再通过 AJAX 技术请求 API 获取数据，
         *     一旦接口返回数据，客户端就会完成动态内容的渲染，并呈现完整的页面
         * 当用户再次通过点击“跳转”到其他页面时，浏览器并不会真正的进行跳转动作，
         *  即不会进行刷新，而是通过前端路由的方式动态地渲染页面
         * 
         * SSR 与 CSR 的比较
         * - SSR 对 SEO 更加友好，而 CSR 对 SEO 不太友好
         * - SSR 的内容到达时间更快，因此它不会产生白屏问题。
         *     相对地，CSR 会有白屏问题
         * - SSR 是在服务端完成页面渲染的，所以它需要消耗更多服务端资源。
         *     CSR 则能够减少对服务端资源的消耗
         * - CSR 不需要进行真正的“跳转”，用户会感觉更加“流畅”，
         *     所以 CSR 相比 SSR 具有更好的用户体验
         * 
         * 同构渲染分为首次渲染（即首次访问或刷新页面）以及非首次渲染
         * - 同构渲染中的首次渲染与 SSR 的工作流程是一致的
         * - 同构渲染所产生的 HTML 页面与 SSR 所产生的 HTML 页面有一点最大的不同
         *     * 前者会包含当前页面所需要的初始化数据
         *     * 服务器通过 API 请求的数据会被序列化为字符串，并拼接到静态的HTML 字符串中，最后一并发送给浏览器
         * 
         * 激活包含两部分工作内容（“hydration”）
         * - Vue.js 在当前页面已经渲染的 DOM 元素以及 Vue.js 组件所渲染的虚拟DOM 之间建立联系
         * - Vue.js 从 HTML 页面中提取由服务端序列化后发送过来的数据，
         *     用以初始化整个 Vue.js 应用程序
         * 激活完成后，整个应用程序已经完全被 Vue.js 接管为 CSR 应用程序了
         *   后续操作都会按照 CSR 应用程序的流程来执行
         *   如果刷新页面，仍然会进行服务端渲染，然后再进行激活，如此往复
         * 
         * 对同构渲染最多的误解是，它能够提升可交互时间（TTI）。
         *   同构渲染仍然需要像 CSR 那样等待 JavaScript 资源加载完成，并且客户端激活完成后，才能响应用户操作。
         *   因此，理论上同构渲染无法提升可交互时间
         * 
         * 同构渲染方案在首次渲染时和浏览器刷新时仍然需要服务端完成渲染工作，
         *  所以也需要部分服务端资源，
         *  但相比所有页面跳转都需要服务端完成渲染来说，
         *  同构渲染所占用的服务端资源相对少一些
         * 
         * 同构渲染的“同构”一词的含义是，同样一套代码既可以在服务端运行，也可以在客户端运行。
        */
    </script>
</html>